<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Netty-Websocket</title>
    <script type="text/javascript">

        //websocket维持连接检测
        var heartCheck = {
            timeout: 5000,        //5秒发一次
            timeoutObj: null,
            reset: function () {
                //清空计时
                clearTimeout(this.timeoutObj);
                return this;
            },
            start: function () {
                var self = this;
                //setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。
                //setInterval() 是属于 window 的方法，该方法用于在指定的毫秒数周期调用函数或计算表达式。
                this.timeoutObj = setInterval(function () {
                    //这里发送一个心跳，后端收到后，返回一个心跳消息，
                    //onmessage拿到返回的心跳就说明连接正常
                    //发送维持连接消息
                    if (ping()) {
                        console.log("发送维持连接消息：发送成功");
                    } else {
                        console.log("发送维持连接消息：发送失败");
                    }
                }, this.timeout)
            }
        }

        var socket;
        if (!window.WebSocket) {
            window.WebSocket = window.MozWebSocket;
        }
        if (window.WebSocket) {

            socket = new WebSocket("ws://localhost:9501?uid=" + 1 + "&amp;cid=" + 1);
            //发送心跳
            heartCheck.reset().start();
            socket.onmessage = function (event) {
                //拿到任何消息都说明当前连接是正常的
                var ta = document.getElementById('responseText');
                ta.value += event.data + "\r\n";
            };
            socket.onopen = function (event) {
                var ta = document.getElementById('responseText');
                ta.value = "Netty-WebSocket服务器。。。。。。连接成功  \r\n"+"ws://localhost:9501?uid=" + 1 + "&amp;cid=" + 1+ "\r\n";
            };
            socket.onclose = function (event) {
                var ta = document.getElementById('responseText');
                ta.value = "Netty-WebSocket服务器。。。。。。关闭成功 \r\n"+"ws://localhost:9501?uid=" + 1 + "&amp;cid=" + 1+ "\r\n";
            };
        } else {
            alert("您的浏览器不支持WebSocket协议！");
        }

        function send() {
            //创建 Object 对象
            var p = new Object()
            //动态添加属性和方法
            p.uid = document.getElementById('uid').value;
            p.cid = 1;
            p.message = document.getElementById('message').value;
            var message = JSON.stringify(p);//调用stringify()将一个JS对象转换为JSON
            if (!window.WebSocket) {
                console.log("发送消息：未建立连接");
            }
            if (socket.readyState == WebSocket.OPEN) {
                socket.send(message);
                console.log("发送消息：发送成功");
            } else {
                console.log("发送消息：发送失败");
            }

        }

        function ping() {
            if (!window.WebSocket) {
                return false
            }
            if (socket.readyState == WebSocket.OPEN) {
                socket.send("PING");
                return true;
            } else {
                return false;
            }

        }



    </script>
</head>
<body>
<form onSubmit="return false;">
    <label hidden="true">ID</label><input type="hidden" id="uid" name="uid" value=""/>
    <label>TEXT</label><input type="text" id="message" name="message" value="这里输入消息"/> <br/>
    <br/> <input type="button" value="发送ws消息"
                 onClick="send()"/>
    <hr color="black"/>
    <h3>服务端返回的应答消息</h3>
    <textarea id="responseText" style="width: 1024px;height: 300px;"></textarea>
</form>
</body>
</html>
